<!-- 发布闲置 -->
<template>
	<view class="container">
		<view class="describe">
			<input type="text"
				v-model="info.goods_name"
				placeholder="商品标题  写下品牌名称或型号" 
				placeholder-class="origion" />
			<textarea value=""
				v-model="info.goods_content"
				placeholder-class="origion1"
				placeholder="在这里对宝贝进行详细描述吧讲一下宝贝转手原因、用途、入手渠道等" />
		</view>
		<view class="line"></view>
		<!-- 图片活着视频上传  -->
		<view class="img-video-address">
			<view>
				<u-upload  
					ref="uUpload" 
					:action="action" 
					:file-list="fileList" 
					@on-success="onSuccess"
					:show-progress="false"
					:header="Header"
					:max-size="5 * 1024 * 1024" max-count="6" >
				</u-upload> 
			</view>
			<view>
				<image src="https://community.chuangxiangdianli.com/images/neighborimg/market/dingwei@2x.png" mode="">
				</image>
				<text 
					@click="open_address_list"
					v-if="addressData.length>0">
					{{addressData[addressIndex].area_info}}{{addressData[addressIndex].address}}
				</text>
				<text v-else @click="add_address">新增地址</text>
			</view>
		</view>
		<view class="line"></view>
		<view class="bottom">
			<view>
				<view class="label">
					价格
				</view>
				<view class="input">
					<input v-model="info.goods_price" type="text" value="" />
				</view>
				<!-- <image src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_arrow@2x.png" mode=""></image> -->
			</view>
			<view @click="chang_types">
				<view class="label">
					分类
				</view>
				<view class="input">
					<template v-if="goods_types.id">
						<view>{{goods_types.name}}</view>
					</template>
				</view>
				<image src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_my_arrow@2x.png" mode=""></image>
			</view>
			<view>
				<view class="label">
					交易方式
				</view>
				<view class="button">
					<view 
						@click="change_trade_method(1)"
						:class="trade_method==1?'active':''">
						自提
					</view>
					<view 
						@click="change_trade_method(2)"
						:class="trade_method==2?'active':''">
						面交
					</view>
				</view>
			</view>
		</view>
		<view class="submit" @click="Submit">
			发布
		</view>
		<!-- 地址列表 -->
		<u-popup v-model="addressFlag" mode='bottom' :closeable="true" border-radius="20">
			<view class="addTitle">
				收货地址
				<view class="new" @click="add_address">新增</view>
			</view>
			<scroll-view scroll-y="true" style="max-height: 700rpx;min-height:300rpx;padding: 0 30rpx;box-sizing: border-box;">
				<view class="to_address_item" v-if="JSON.stringify(addressData) != '[]'" v-for="(item, index) in addressData" @click="changeAddress(index)">
					<view class="check_box">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" v-if="index != addressIndex" alt="">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" v-if="index == addressIndex" alt="">
					</view>
					<view class="txt_box over2">{{item.area_info+item.address}}</view>
				</view>
				<view class="addTitle" v-if="JSON.stringify(addressData) == '[]'">暂无收货地址</view>
			</scroll-view>
			<view class="button_box" @click="confirm_address">确认</view>
		</u-popup>
		<!-- 选择上传视频还是图片 -->
		<!-- <u-popup v-model="show"
			mode="bottom" 
			closeable
			height="300rpx"
			@close="close" >
			<view class="modal-con">
				<view @click="upload_img">
					图片
				</view>		
				<view @click="upload_video">
					视频
				</view>	
			</view>
		</u-popup> -->
	</view>
</template>
<!-- js -->
<script>
	// 引入封装的请求
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				// 用户信息
				userInfo:{},
				// 用户地址列表
				addressData:[],
				// 选择地址的弹框
				addressFlag:false,
				// 地址索引
				addressIndex:0,
				// 商品编辑 - 当前的商品id
				id:null,
				// 图片上传地址
				action: 'https://community.chuangxiangdianli.com/api/Mini/circle/uploadImg',
				// 图片上传的header
				Header:{
					"Authorization": ''
				},
				// 上传的图片列表
				fileList:[],
				// 传给后台的图片列表
				images:[],
				// 选择上传的文件类型
				show:false,
				// 交易方式 0: 字体 1：面交
				trade_method:1,
				// 提交的详情 
				info:{
					goods_name:'',
					goods_images:'',
					address:'',
					goods_price:'',
					cate_id:'',
					deal_type:1,
					goods_content:''
				},
				// 当前选择的商品分类
				goods_types:{
					id:null,
					name:''
				}
			}
		},
		computed: {
			
		},
		watch: {
			
		},
		mounted() {
			
		},
		onLoad(options) {
			let id = options.id
			this.id = id
			if(id){
				// console.log(id)
				this.get_good_info()
			}
			// 获取用户地址列表
			this.get_user_address()
		},
		onShow() {
			let that = this
			let goods_types = uni.getStorageSync('goods_types')
			if(goods_types){
				this.goods_types = JSON.parse(goods_types)
				this.info.cate_id = this.goods_types.id
				uni.removeStorageSync('goods_types')
			}
			let user_info = uni.getStorageSync('userInfo')
			uni.getStorage({
				key:'userInfo',
				success:function(res){
					// console.log(res)
					that.userInfo = res.data
					that.Header.Authorization = 'Bearer '+res.data.token
				},
				fail:function(res){
					uni.navigateTo({
						url: '/login/bindinguser/index'
					})
				},
			})
		},
		methods: {
			// 获取用户地址列表
			get_user_address(){
				let that = this
				request.post({
					url:'Mini/address/getAddress'
				}).then(res=>{
					console.log(res)
					if(res.status){
						that.addressData = res.data
					}
				})
			},
			// 点击新增地址
			add_address(){
				uni.navigateTo({
					url: '/me/address/addAddress'
				})
			},
			// 确认选择的地址 
			confirm_address(){
				this.addressFlag = false
			},
			// 打开地址列表
			open_address_list(){
				this.addressFlag = true
			},
			// 切换收货地址
			changeAddress(index) {
				if (index == this.addressIndex) return
				this.addressIndex = index
				this.addressFlag = false
			},
			// 前往选择分类的页面 
			chang_types(){
				uni.navigateTo({
					url:'/neighbor/market/goodsTypes/index'
				})
			},
			
			// 改变交易方式 
			change_trade_method(type){
				this.trade_method = type
				this.info.deal_type = type
			},
			// 发布闲置
			Submit(){
				let that = this
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})   
				this.filterImgs(files)
				let str = this.images.join(',')
				if(this.addressData,length<=0){
					this.info.address = ''
				}else{
					let address = addressData[addressIndex].area_info + addressData[addressIndex].address
					this.info.address = address
				}
				
				if(!this.info.goods_name){
					uni.showToast({
					    title: '请录入商品名称',
					    duration: 2000,
						icon:'none'
					});
					return false
				}
				if(!this.info.goods_content){
					uni.showToast({
					    title: '请录入商品描述',
					    duration: 2000,
						icon:'none'
					});
					return false
				}
				if(!str){
					uni.showToast({
					    title: '请上传商品图片',
					    duration: 2000,
						icon:'none'
					});
					return false
				}
				if(!this.info.address){
					uni.showToast({
					    title: '请选择发布地址',
					    duration: 2000,
						icon:'none'
					});
					return false
				}
				if(!this.info.goods_price){
					uni.showToast({
					    title: '请录入商品价格',
					    duration: 2000,
						icon:'none'
					});
					return false
				}
				
				if(!this.info.cate_id){
					uni.showToast({
					    title: '请选择商品分类',
					    duration: 2000,
						icon:'none'
					});
					return false
				}
				this.info.goods_images = str
				// console.log(this.info)
				// return false
				if(!this.id){
					request.post({
						url:'wechat/flea_goods',
						data:that.info
					}).then(res=>{
						// console.log(res)
						if(res.code==200){
							uni.showToast({
							    title: '发布成功',
							    duration: 2000,
								icon:'none',
								success() {
									that.info= {
										goods_name:'',
										goods_images:'',
										address:'',
										goods_price:'',
										cate_id:'',
										deal_type:1,
										goods_content:''
									}
									that.fileList = []
									uni.navigateTo({
										url:'/neighbor/market/mine/release/index',
									})
								}
							});
						}else{
							uni.showToast({
							    title: res.msg,
							    duration: 2000,
								icon:'none'
							});
						}
					})
					return false
				}
				this.info.id = this.id
				request.get('wechat/flea_goods/'+this.id+'/edit',this.info).then(res=>{
					// console.log(res)
					if(res.code==200){
						uni.showToast({
						    title: res.msg,
						    duration: 2000,
							icon:'none',
							success() {
								uni.navigateBack()
							}
						});
					}else{
						uni.showToast({
						    title: res.msg,
						    duration: 2000,
							icon:'none'
						});
					}
				})
			},
			// 过滤图片路径
			filterImgs(arr){
				let newImgs = []
				arr.map((val,i) => {
					console.log(val)
					if(val.response){
						newImgs.push(this.$baseImgUrl + val.response.data.path) 
					}else{
						newImgs.push(val.url)
					}
				})
				this.images = Array.from(new Set(newImgs)) 
				console.log(this.images)
			},
			// 上传图片或者视频
			choose_img(){
				this.show = true	
			},
			// 关闭选择上传的文件的类型的弹框 
			close(){
				this.show = false
			},
			onSuccess(data, index, lists, name){
				// console.log('图片上传成功')
			},
			// 编辑  - 获取商品详情
			get_good_info(){
				let that = this
				this.$mrequest2({
					method: 'get',
					url: 'wechat/flea_goods/'+this.id,
				}).then(res => {
					// console.log(res)
					if(res.code == 200){
						let images = res.data.goods_images
						images.forEach(v=>{
							that.fileList.push({
								url:v
							})
						})
						that.info = {
							goods_name:res.data.goods_name,
							goods_price:res.data.goods_price,
							cate_id:res.data.cate_id,
							deal_type:res.data.deal_type,
							goods_content:res.data.goods_content
						}
						that.trade_method = res.data.deal_type
						that.goods_types = {
							id:res.data.cate_id,
							name:res.data.cate_name
						}
					}
					 
				});
			},
		}
	}
</script>
<!-- css -->
<style lang="scss" scoped>
	.container{
		width: 100vw;
		background-color: #fff;
		box-sizing: border-box;
		font-family: PingFang SC;
		overflow: auto;
		padding-bottom: 46rpx;
		@mixin style-line($width,$height,$bgcolor) {
			width: $width;
			height: $height;
			background-color: $bgcolor;
		}
		.describe{
			width: 100%;
			border-top: 2rpx solid #F3F5F8;
			height: 384rpx;
			box-sizing: border-box;
			padding-top: 41rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			.origion{
				font-size: 30rpx;
				font-family: Hiragino Sans GB;
				font-weight: normal;
				color: #999999;
				line-height: 56rpx;
			}
			.origion1{
				font-size: 26rpx;
				font-family: Hiragino Sans GB;
				font-weight: normal;
				color: #999999;
			}
			input{
				margin-bottom: 35rpx;
			}
			textarea{
				line-height: 44rpx;
				min-height: 34rpx;
			}
		}
		.line{
			@include style-line(100%,10rpx,#F3F5F8)
		}
		.img-video-address{
			width: 100%;
			box-sizing: border-box;
			padding-left: 24rpx;
			padding-top: 25rpx;
			padding-bottom: 41rpx;
			&>view:nth-child(1){
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				&>view{
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx;
					position: relative;
					input{
						position: absolute;
						display: block;
						width: 100%;
						height: 100%;
						z-index: 2;
						left: 0;
						top: 0;
					}
				}
				.img-item{
					position: relative;
					margin-right: 30rpx;
					box-sizing: border-box;
					border: 1rpx solid red;
					margin-bottom: 30rpx;
					&:last-child{
						margin-right: 0;
					}
					.del{
						position: absolute;
						right: 0;
						top: 0;
						width: 22rpx;
						height: 22rpx;
						z-index: 10;
					}
				}
				&>view:nth-child(1){
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-family: Hiragino Sans GB;
					font-weight: normal;
					color: #999999;
					line-height: 44rpx;
					background: #F2F3F7;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					image{
						width: 50rpx;
						height: 50rpx;
						margin-bottom: 16rpx;
					}
				}
			}
			&>view:nth-child(2){
				display: flex;
				align-items: center;
				margin-top: 63rpx;
				image{
					width: 20rpx;
					height: 30rpx;
					margin-right: 31rpx;
				}
				text{
					font-size: 24rpx;
					font-family: Hiragino Sans GB;
					font-weight: normal;
					color: #999999;
					line-height: 44rpx;
				}
			}
		}
		.bottom{
			width: 100%;
			box-sizing: border-box;
			padding: 0 24rpx;
			margin-bottom: 95rpx;
			&>view{
				height: 90rpx;
				width: 100%;
				border-bottom: 1rpx solid #DCDCDC;
				display: flex;
				align-items: center;
				.label{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-right: 30rpx;
				}
				.button{
					display: flex;
					align-items: center;
					margin-left: auto;
					margin-right: 8rpx;
					&>view{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 90rpx;
						height: 50rpx;
						background: #F2F3F7;
						border-radius: 10rpx;
						font-size: 22rpx;
						font-family: Hiragino Sans GB;
						font-weight: normal;
						color: #666666;
						margin-right: 20rpx;
						transition: all 0.1s linear 0s;
						&:last-child{
							margin-right: 0;
						}
						&.active{
							background: linear-gradient(173deg, #FBB10D 0%, #FC9E00 100%);
							color: #FFFFFF;
						}
					}
				}
				.input{
					width: 550rpx;
					height: 100%;
					display: flex;
					align-items: center;
					input{
						height: 100%;
						width: 100%;
					}
				}
				image{
					margin-left: auto;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.submit{
			width: 690rpx;
			height: 90rpx;
			background: linear-gradient(3deg, #FC9E00 0%, #FBB10D 76%);
			border-radius: 45rpx;
			margin: 0 auto;
			font-size: 36rpx;
			font-family: Hiragino Sans GB;
			font-weight: normal;
			color: #FEFEFE;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.modal-con{
			display: flex;
			// align-items: flex-end;
			justify-content: flex-end;
			flex-direction: column;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding-bottom: 40rpx;
			&>view{
				height: 50rpx;
				border-bottom: 2rpx solid #eee;
				width: 100%;
				text-align: center;
				padding-bottom: 10rpx;
				margin-bottom: 20rpx;
				&:last-child{
					border: none;
				}
			}
		}
	}
	// 地址列表弹框的样式
	.addTitle{
		position: relative;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		margin: 20rpx 0;
		.new{
			position: absolute;
			left: 30rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.to_address_item {
		margin-bottom: 50rpx;
		width: 100%;
		height: 66rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.check_box {
			flex-shrink: 0;
			width: 32rpx;
			height: 32rpx;
			position: relative;
			margin-right: 26rpx;
		
			img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		.txt_box {
			font-size: 26rpx;
			font-weight: blod;
		}
	}
	.button_box {
		height: 90rpx;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		// background: #2B95FF;
		border-radius: 45rpx;
		width: calc(100vw - 60rpx);
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
		color: white;
		margin: 0 auto 70rpx;
		// margin-bottom: 70rpx;
	}
</style>
